<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="手机验证码登录"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> 
    <van-form @submit="onSubmit" style="margin: 20px 15px;">
      <van-field
        v-model="username"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请正确输入手机号' }]"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" style="background-color: rgb(242,242,242);" >发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button class="btn"  native-type="submit">登录</van-button>
      </div>
      <router-link to="/my/login">
        <p style="color: gray;margin: 5px 25px;font-size: 15px;">账号登录</p>
      </router-link>
    </van-form>
    <van-divider
      :style="{ color: '#A9A9A9', borderColor: '#A9A9A9', padding: '0 16px', margin:'280px 0 0 0' }"
    >
      第三方账号登录
    </van-divider>
    <template>
      <div style="width: 60%; margin: auto; display: flex;">
        <div style="margin: auto;">
          <van-icon name="wechat" size="50" />
          <p style="color: grey;font-size: 15px;">微信</p>
        </div>
        <div style="margin-left: 40px;margin: auto;">
          <van-icon name="alipay" size="50" />
          <p style="color: grey;font-size: 15px;">支付宝</p>
        </div>
        <div style="margin-left: 40px;margin: auto;">
          <van-icon name="share" size="50" />
          <p style="color: grey;font-size: 15px;">更多</p>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import router from '@/router';
import { Toast } from 'vant';

export default {
    methods: {
        onClickLeft() {
          this.$router.push('/my/login')
        },
        onClickRight() {
          this.$router.push('/my/reguest')
        },
    },
    components: { router }
}
</script>

<style lang="scss" scoped>
.btn{
  width: 80%;
  margin: 0 0 0 25px;
  margin-top: 150px;
  background-color: rgb(242,242,242);
}
</style>